<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>balance demo</title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="index.css">
<body>
<div id="container" class="cm-content">
  <div id="balance">
    <div class="header">
      <div class="go left">
        <a>
          <i class="fa fa-chevron-left"></i>
        </a>
        <span>结算</span>
      </div>
      <!-- <div class="login right">
        <a>编辑</a>
      </div> -->
    </div>
    <div class="content">
      <div class="address">
        <div class="address-null" v-if="isObjectEmpty">
          <div class="text left">
            <p>您暂时没有资源补给地</p>
            <p>请及时建造，以供补给</p>
          </div>
          <div class="create-address left">
            <a @click="changeDisplay('create-address', '新建补给')">创建补给</a>
          </div>
        </div>
        <div class="address-content" v-else>
          <div class="text left" @click="changeDisplay('select-address', '选择补给地')">
            <div class="info">
              <i class="fa fa-user blue"></i>
              <span v-text="addressDefault.name"></span>
            </div>
            <div class="info">
              <i class="fa fa-tablet blue"></i>
              <span v-text="addressDefault.phone"></span>
            </div>
            <div class="info">
              <i class="fa fa-map-marker blue"></i>
              <span v-text="addressDefault.address"></span>
            </div>
          </div>
          <div class="right-icon left">
            <i class="fa fa-chevron-right"></i>
          </div>
        </div>
      </div>
      <div class="list-data">
        <div class="item" v-for="item in list.data">
          <div class="img left">
            <img :src="item.img"/>
          </div>
          <div class="text left">
            <div class="desc">
              <span v-text="item.name"></span>
              <span v-for="tag in item.tag" v-text="tag">小米MIX</span>
            </div>
            <div class="sum">
              <span class="price orange left" v-text="item.price"></span>
              <span class="count right">x{{item.count}}</span>
            </div>
          </div>
        </div> 
      </div>
      <div class="module">
        <div class="pay" @click="changeDisplay('pay-style', '支付方式')">
          <span>支付方式</span>
          <a class="right"><span v-text="payStyle">支付宝</span><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="dispatching" @click="changeDisplay('carry-style', '配送方式')">
          <span>配送方式</span>
          <a class="right"><span v-text="carryStyle"></span><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="others">
          <span>发票信息</span>
          <a class="right"><i class="fa fa-chevron-right"></i></a>
        </div>
        <div class="others">
          <span>备注信息</span>
          <a class="right"><i class="fa fa-chevron-right"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="balance">
    <div class="cm-content">
      <div class="text left">
        <span>实付总额: </span>
        <i class="fa fa-yen"></i>
        <span class="money">2166.04</span>
      </div>
      <div class="balance-btn right">
        <a>结算</a>
      </div>
    </div>
  </div>
  <div class="fix-wrap transitionLeft" :style="leftStyle">
    <div id="container" class="cm-content">
      <div class="header">
        <div class="go left">
          <a @click="closeDisplay()">
            <i class="fa fa-chevron-left"></i>
          </a>
          <span v-text="displayChange.text"></span>
        </div>
        <!-- <div class="login right">
          <a>编辑</a>
        </div> -->
      </div>  
      <div id="create-address" v-show="displayChange.show == 'create-address'">
        <div class="form">
          <div class="input">
            <i class="fa fa-user"></i>
            <input v-model="createAddress.name" placeholder="姓名" />
          </div>
          <div class="input">
            <i class="fa fa-tablet"></i>
            <input v-model="createAddress.phone"  placeholder="手机号" />
          </div>
          <div class="input">
            <i class="fa fa-map-marker"></i>
            <input v-model="createAddress.address" placeholder="地址信息" />
          </div>
          <div class="button">
            <button class="submit" @click="create">新建地址</button>
          </div>
        </div>
      </div>
      <div id="select-address" v-show="displayChange.show == 'select-address'">
        <div class="select">
          <div class="item" v-for= '(item,index) in list.address'>
            <div class="radio">
              <input @click="changeDefault(index)" type="radio" value="1"  
              v-model.number="item.isDefault" />
              <label class="fa blue"></label>
            </div>
            <div class="desc">
              <div class="info">
                <i class="fa fa-user blue"></i>
                <span v-text="item.name"></span>
              </div>
              <div class="info">
                <i class="fa fa-tablet blue"></i>
                <span v-text="item.phone"></span>
              </div>
              <div class="info">
                <i class="fa fa-map-marker blue"></i>
                <span  v-text="item.address"></span>
              </div>
            </div>
          </div>
          <div class="button">
            <a @click="changeDisplay('create-address', '新建补给')">添加新地址</a>
          </div>
        </div>
      </div>
      <div id="pay-style" v-show="displayChange.show == 'pay-style'">
        <div class="list">
          <div class="item" v-for="item in list.pay" @click="select('pay',item)">
            <div class="radio">
              <input type="radio"  name="pay" :value="item" v-model="payStyle" />
              <label class="fa blue"></label>
            </div>
            <div class="desc">
              <span v-text="item"></span>
            </div>
          </div>
        </div>
      </div>
      <div id="carry-style" v-show="displayChange.show == 'carry-style'">
        <div class="list">
          <div class="item" v-for="item in list.carry" @click="select('carry',item)">
            <div class="radio">
              <input type="radio" name="carry" :value="item" v-model="carryStyle" />
              <label class="fa blue"></label>
            </div>
            <div class="desc">
              <span v-text="item"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#container',
    data: {
      list: {
        data: [
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true},
          {name: '小米MIX', tag: ['港版', '32G', '玫瑰金'], img: 'img/xiaomi.jpg', price: '1999', count: '1', check: true}
        ],
        address: [],
        pay: ['支付宝', '微信支付', '银行卡支付', '货到付款'],
        carry: ['申通', '中通', '圆通', 'SF顺丰', 'EMS']
      },
      createAddress: {
        name: '',
        phone: '',
        address: ''
      },
      addressDefault: {},
      displayChange: {
        show: 'default',
        text: ''
      },
      leftStyle: {
        left: ''
      },
      payStyle: '',
      carryStyle: ''
    },
    computed: {
      isObjectEmpty: function() {
        for( var key in this.addressDefault) {
          return false;
        }
        return true;
      },
      isCreateEmpty: function() {
        for( var key in this.createAddress) {
          if (this.createAddress[key] == '') {
            return true;
          }
        }
        return false;
      }
    },
    mounted: function() {
    },
    watch: {
      'displayChange.show': function(news, old) {
      }
    },
    methods: {
      changeDisplay: function(item, name) {
        this.displayChange.show = item;
        this.displayChange.text = name;
        this.leftStyle.left = '0';
      },
      closeDisplay: function() {
        this.displayChange.show = 'default';
        this.displayChange.text = '';
        this.leftStyle.left = '';
      },
      create: function() {
        if(!this.isCreateEmpty) {
          var item = {};
          for(var key in this.createAddress) {
            item[key] = this.createAddress[key];
            this.createAddress[key] = '';
          }
          item.isDefault = this.list.address.length > 0 ? 0 : 1;
          if (this.list.address.length == 0) {
            this.addressDefault = item;
          }
          this.list.address.push(item);
          this.changeDisplay('select-address','选择地址');
        }
      },
      changeDefault: function(index) {
        this.closeDisplay();
        for(var i=0; i < this.list.address.length; i++) {
          if (i != index && this.list.address[i].isDefault == 1) {
            var item = this.list.address[i];
            item.isDefault = 0;
            Vue.set(this.list.address, i, item);
          }else if(i == index && this.list.address[i].isDefault == 0) {
            var item = this.list.address[i];
            item.isDefault = 1;
            Vue.set(this.list.address, i, item);
            this.addressDefault = item;
            this.closeDisplay();
          }
        }
      },
      select: function(key,value) {
        
        if(key == 'pay') {
          this.payStyle = value;
        } else if(key == 'carry') {
          this.carryStyle = value;
        }
        this.closeDisplay();
      }
    }
    
  });
</script>
</html>